@charset "UTF-8";
@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(1turn);
  }
}
/**
 * 星星
 * @param {Length} $size - 大小
 * @param {Number} $points - 边数
 * @param {Number} $inset - 内缩比例
 * @param {Color} $fill - 填充色
 */
html {
  box-sizing: border-box;
  line-height: 1.5;
  font-family: sans-serif;
  height: 100%;
  display: flex;
}
html * {
  margin: auto;
}

* {
  box-sizing: inherit;
  margin: 0;
  padding: 0;
}
*::before, *::after {
  box-sizing: inherit;
}

body {
  display: flex;
  justify-content: center;
  height: 100vh;
  width: 100%;
  background-color: hsl(40, 75%, 50%);
  font-size: 0.8em;
}

[class^=star],
[class*=" star"] {
  width: 6em;
  height: 6em;
  margin: 0.5em;
  float: left;
}

.panel {
  width: 21em;
  background: #eee;
  border-radius: 0.5em;
  padding: 2em;
  display: inline-block;
  position: relative;
  border: 0.5em solid #bbb;
  font-size: 0.75em;
}
.panel .star-badge {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200' %3E%3Cpolygon fill='hsl(0, 80%, 40%)' points='100, 200 113.2969295284, 183.9535089506 130.9016994375, 195.1056516295 138.5891924779, 175.735554556 158.7785252292, 180.9016994375 160.1040764009, 160.1040764009 180.9016994375, 158.7785252292 175.735554556, 138.5891924779 195.1056516295, 130.9016994375 183.9535089506, 113.2969295284 200, 100 183.9535089506, 86.7030704716 195.1056516295, 69.0983005625 175.735554556, 61.4108075221 180.9016994375, 41.2214747708 160.1040764009, 39.8959235991 158.7785252292, 19.0983005625 138.5891924779, 24.264445444 130.9016994375, 4.8943483705 113.2969295284, 16.0464910494 100, 0 86.7030704716, 16.0464910494 69.0983005625, 4.8943483705 61.4108075221, 24.264445444 41.2214747708, 19.0983005625 39.8959235991, 39.8959235991 19.0983005625, 41.2214747708 24.264445444, 61.4108075221 4.8943483705, 69.0983005625 16.0464910494, 86.7030704716 0, 100 16.0464910494, 113.2969295284 4.8943483705, 130.9016994375 24.264445444, 138.5891924779 19.0983005625, 158.7785252292 39.8959235991, 160.1040764009 41.2214747708, 180.9016994375 61.4108075221, 175.735554556 69.0983005625, 195.1056516295 86.7030704716, 183.9535089506' /%3E%3C/svg%3E");
  background-position: 50%;
  background-repeat: no-repeat;
  transform: rotate(-10deg);
  display: table;
  font-size: 1.5em;
  position: absolute;
  top: -3em;
  left: -3em;
  filter: drop-shadow(1px 1px 1px hsla(0, 0%, 0%, 0.35));
}
.panel .star-badge h6 {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  font-weight: bold;
  color: #fff;
  font-size: 1.5em;
  text-transform: uppercase;
}
.panel .star3 {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' %3E%3Cpolygon fill='hsl(0, 70%, 50%)' points='5, 10 5.8660254038, 5.5 9.3301270189, 2.5 5, 4 0.6698729811, 2.5 4.1339745962, 5.5' /%3E%3C/svg%3E");
  background-position: 50%;
  background-repeat: no-repeat;
}
.panel .star4 {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' %3E%3Cpolygon fill='hsl(40, 75%, 50%)' points='5, 10 6.767766953, 6.767766953 10, 5 6.767766953, 3.232233047 5, 0 3.232233047, 3.232233047 0, 5 3.232233047, 6.767766953' /%3E%3C/svg%3E");
  background-position: 50%;
  background-repeat: no-repeat;
}
.panel .star5 {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' %3E%3Cpolygon fill='hsl(80, 75%, 50%)' points='5, 10 6.1755705046, 6.6180339887 9.7552825815, 6.5450849719 6.9021130326, 4.3819660113 7.9389262615, 0.9549150281 5, 3 2.0610737385, 0.9549150281 3.0978869674, 4.3819660113 0.2447174185, 6.5450849719 3.8244294954, 6.6180339887' /%3E%3C/svg%3E");
  background-position: 50%;
  background-repeat: no-repeat;
}
.panel .star6 {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' %3E%3Cpolygon fill='hsl(120, 75%, 50%)' points='5, 10 5.65, 6.1258330249 9.3301270189, 7.5 6.3, 5 9.3301270189, 2.5 5.65, 3.8741669751 5, 0 4.35, 3.8741669751 0.6698729811, 2.5 3.7, 5 0.6698729811, 7.5 4.35, 6.1258330249' /%3E%3C/svg%3E");
  background-position: 50%;
  background-repeat: no-repeat;
}
.panel .star7 {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' %3E%3Cpolygon fill='hsl(160, 75%, 50%)' points='5, 10 5.6508256087, 6.3514533019 8.9091574123, 8.1174490093 6.4623918683, 5.3337814009 9.8746395609, 3.8873953302 6.1727472237, 4.0647652972 7.1694186956, 0.4951556605 5, 3.5 2.8305813044, 0.4951556605 3.8272527763, 4.0647652972 0.1253604391, 3.8873953302 3.5376081317, 5.3337814009 1.0908425877, 8.1174490093 4.3491743913, 6.3514533019' /%3E%3C/svg%3E");
  background-position: 50%;
  background-repeat: no-repeat;
}
.panel .star8 {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' %3E%3Cpolygon fill='hsl(200, 75%, 50%)' points='5, 10 5.8419035512, 7.0325349715 8.5355339059, 8.5355339059 7.0325349715, 5.8419035512 10, 5 7.0325349715, 4.1580964488 8.5355339059, 1.4644660941 5.8419035512, 2.9674650285 5, 0 4.1580964488, 2.9674650285 1.4644660941, 1.4644660941 2.9674650285, 4.1580964488 0, 5 2.9674650285, 5.8419035512 1.4644660941, 8.5355339059 4.1580964488, 7.0325349715' /%3E%3C/svg%3E");
  background-position: 50%;
  background-repeat: no-repeat;
}
.panel .star9 {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' %3E%3Cpolygon fill='hsl(240, 75%, 50%)' points='5, 10 5.5985352508, 6.6444620864 8.2139380484, 8.8302222156 6.5155444566, 5.875 9.9240387651, 5.8682408883 6.7234135678, 4.6961156891 9.3301270189, 2.5 6.124878317, 3.6594222245 6.7101007166, 0.3015368961 5, 3.25 3.2898992834, 0.3015368961 3.875121683, 3.6594222245 0.6698729811, 2.5 3.2765864322, 4.6961156891 0.0759612349, 5.8682408883 3.4844555434, 5.875 1.7860619516, 8.8302222156 4.4014647492, 6.6444620864' /%3E%3C/svg%3E");
  background-position: 50%;
  background-repeat: no-repeat;
}
.panel .star10 {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' %3E%3Cpolygon fill='hsl(280, 75%, 50%)' points='5, 10 5.7107390871, 7.1874299875 7.9389262615, 9.0450849719 6.8607390871, 6.3519060803 9.7552825815, 6.5450849719 7.3, 5 9.7552825815, 3.4549150281 6.8607390871, 3.6480939197 7.9389262615, 0.9549150281 5.7107390871, 2.8125700125 5, 0 4.2892609129, 2.8125700125 2.0610737385, 0.9549150281 3.1392609129, 3.6480939197 0.2447174185, 3.4549150281 2.7, 5 0.2447174185, 6.5450849719 3.1392609129, 6.3519060803 2.0610737385, 9.0450849719 4.2892609129, 7.1874299875' /%3E%3C/svg%3E");
  background-position: 50%;
  background-repeat: no-repeat;
}
.panel .star11 {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' %3E%3Cpolygon fill='hsl(320, 75%, 50%)' points='5, 10 5.5634651137, 6.9189859472 7.7032040873, 9.2062676642 6.5114991487, 6.3097214679 9.5481599768, 7.077075065 6.9796428838, 5.2846296765 9.9491072094, 4.2884258086 6.8192639907, 4.169169974 8.7787478718, 1.7256963303 6.0812816349, 3.3174929343 6.4086627842, 0.2025351319 5, 3 3.5913372158, 0.2025351319 3.9187183651, 3.3174929343 1.2212521282, 1.7256963303 3.1807360093, 4.169169974 0.0508927906, 4.2884258086 3.0203571162, 5.2846296765 0.4518400232, 7.077075065 3.4885008513, 6.3097214679 2.2967959127, 9.2062676642 4.4365348863, 6.9189859472' /%3E%3C/svg%3E");
  background-position: 50%;
  background-repeat: no-repeat;
}

@keyframes jiggle {
  from {
    transform: rotate(-3deg);
  }
  to {
    transform: rotate(3deg);
  }
}
.jiggle {
  cursor: pointer;
}
.jiggle:hover {
  animation: jiggle 0.15s linear infinite alternate;
}
.jiggle:nth-of-type(even) {
  animation-direction: alternate-reverse;
}

.star {
  position: absolute;
  left: 50%;
  margin-left: 0;
  margin-top: -50px;
}
.star div {
  border-bottom: 100px solid gold;
  border-top: 75px solid transparent;
  border-right: 75px solid transparent;
  width: 0;
  height: 0;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -75px;
  margin-top: -75px;
  transform-origin: 50% 100%;
}
.star div:nth-of-type(1) {
  transform: rotate(0deg);
}
.star div:nth-of-type(2) {
  transform: rotate(72deg);
}
.star div:nth-of-type(3) {
  transform: rotate(144deg);
}
.star div:nth-of-type(4) {
  transform: rotate(216deg);
}
.star div:nth-of-type(5) {
  transform: rotate(288deg);
}
.star div:nth-of-type(6) {
  transform: rotate(360deg);
}